<template>
  <el-row type="flex" justify="center" class="box">
    <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="in-box">
      <input
        type="text"
        class="home-input"
        placeholder="随时百度一下"
        v-model="sear"
        @keyup.enter="search"
    /></el-col>

    <span class="sear" @click="search"> 百度一下</span>
  </el-row>
</template>

<script>
export default {
  name: "HomePageInput",
  data() {
    return {
      sear: "",
    };
  },
  methods: {
    search() {
      window.open(`http://www.baidu.com/s?ie=utf-8&&word=${this.sear}`);
    },
  },
};
</script>

<style scoped>
.home-input {
  float: left;
  width: 100%;
  min-width: 230px;
  height: 40px;
  background-color: #fff;
}

.sear {
  float: left;
  height: 40px;
  width: 60px;
  background-color: #ff9900;
  color: #fff;
  line-height: 40px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.in-box {
  padding: 0 8px;
  background-color: #fff;
  border-radius: 5px 0 0 5px;
}
.box {
  min-width: 300px;
}
</style>
